<template>
  <div>
    <div class="header">
      <i class="el-icon-monitor"></i> 西区知信楼 F214 电脑概况
    </div>
    <el-table ref="table" :data="computerData" stripe style="width: 100%;" height="390" id="scoll">
      <el-table-column type="index" width="60" align="center"></el-table-column>
      <el-table-column prop="name" label="电脑名称" sortable align="center" width="150"></el-table-column>
      <el-table-column prop="rmsCurrent" label="电流 / mA" align="center" width="150"></el-table-column>
      <el-table-column prop="rmsVoltage" label="电压 / mV" align="center" width="150"></el-table-column>
      <el-table-column prop="time" label="采集时间" sortable align="center"></el-table-column>
      <el-table-column prop="loopCounter" label="采集频率" align="center"></el-table-column>
      <el-table-column prop="uuid" label="uuid" align="center"></el-table-column>
    </el-table>
    <div class="allEchartsBox">
      <div class="lineBarBox" style="width: 40%;">
        <div class="lineBarHeader">F214 各电脑电压、电流明细图</div>
        <div id="scatter" style="width: 520px;height: 250px;margin-left: 20px;"></div>
      </div>
      <div class="pieBox">
        <div class="pieHeader"><i class="el-icon-data-analysis"></i> F214 电脑个数统计</div>
        <div id="gauge" style="width: 520px;height: 250px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import walden from '../../../assets/json/walden.json'
  export default {
    name: 'computer',
    data() {
      return {
        computerData: require('../../../assets/json/computer.json'),
        currentVoltageData: []
      }
    },
    mounted() {
      this.computerData.sort((a,b) => a.duid - b.duid);
      this.numberStatistics();
      this.drawLine();
      this.tableScroll();
    },
    methods: {
      tableScroll() {
        // 拿到表格挂载后的真实DOM
        const table = this.$refs.table;
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper;
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
        window.onresize = () => {
          return (() => {
            window.screenHeight = document.body.clientHeight;
            this.clientHeight = window.screenHeight;
          })()
        }
      },
      drawLine() {
        this.$echarts.registerTheme('walden',walden);
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('scatter'),'walden');
        // 绘制图表
        myChart.setOption({
          grid: {
            x: '3%', //相当于距离左边效果:padding-left
            y: '20%',  //相当于距离上边效果:padding-top
            bottom: '15%',
            containLabel: true
          },
          title: {
            text: 'current / voltage'
          },
          xAxis: {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value} mV'
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value} mA'
            },
            splitLine: {
              show: false
            }
          },
          tooltip: {
            showDelay: 0,
            formatter: function (params) {
              if (params.value.length > 1) {
                return (
                  params.seriesName +
                  ' :<br/>' +
                  params.value[0] +
                  'mV ' +
                  params.value[1] +
                  'mA '
                );
              } else {
                return (
                  params.seriesName +
                  ' :<br/>' +
                  params.name +
                  ' : ' +
                  params.value +
                  'mA '
                );
              }
            },
            axisPointer: {
              show: true,
              type: 'cross',
              lineStyle: {
                type: 'dashed',
                width: 1
              }
            }
          },
          toolbox: {
            feature: {
              dataZoom: {},
              brush: {
                type: ['rect']
              }
            }
          },
          series: [
          {
            type: 'effectScatter',
            name: 'current1 / voltage1',
            symbolSize: 20,
            data: [
              [228538, 141],
              [225301, 3]
            ]
          },
          {
            type: 'scatter',
            name: 'current / voltage',
            data: this.currentVoltageData
          }],
        })
        window.addEventListener("resize", function() { //自动适应大小
        	myChart.resize();
        });
        
        // 1. 实例化对象
        var myChart1 = this.$echarts.init(document.getElementById('gauge'),'walden');
        // 2.指定配置
        var option1 = {
          series: [
            {
              type: 'gauge',
              progress: {
                show: true,
                width: 18
              },
              axisLine: {
                lineStyle: {
                  width: 18
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                length: 15,
                lineStyle: {
                  width: 2,
                  color: '#999'
                }
              },
              axisLabel: {
                distance: 25,
                color: '#999',
                fontSize: 12
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 25,
                itemStyle: {
                  borderWidth: 10
                }
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                fontSize: 30,
                offsetCenter: [0, '70%']
              },
              data: [
                {
                  value: this.currentVoltageData.length
                }
              ]
            }
          ]
        };
        // 3. 把配置给实例对象
        myChart1.setOption(option1);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() { //自动适应大小
        	myChart1.resize();
        });
      },
      numberStatistics() {
        this.currentVoltageData = [];
        this.computerData.forEach(item => {
          let obj = [item.rmsVoltage,item.rmsCurrent];
          this.currentVoltageData.push(obj);
        })
      }
    }
  }
</script>

<style>
  @import url("../../../assets/css/roadLight.css");
</style>
